<template>
	<div class="page-register">
		<article class="header">
			<header>
				<el-avatar
					icon="el-icon-user-solid"
					shape="circle"
					src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
				></el-avatar>
				<span class="login">
					<em class="bold">已有账号？</em>
					<a href="/login">
						<el-button type="primary" size="small">登录</el-button>
					</a>
				</span>
			</header>
		</article>
		<el-steps :active="active" finish-status="success" align-center>
			<el-step title="步骤 1"></el-step>
			<el-step title="步骤 2"></el-step>
		</el-steps>

		<section>
			<el-form
				ref="ruleForm"
				:model="ruleForm"
				:rules="rules"
				label-width="100px"
				class="demo-ruleForm"
				autocomplete="off"
			>
				<div v-if="active == 0">
					<el-form-item prop="textarea">
						<el-input
							:value="ruleForm.textarea"
							type="textarea"
							:rows="10"
							:col="25"
							:readonly="true"
							resize="none"
						>
						</el-input>
					</el-form-item>
					<el-form-item prop="agreed">
						<el-checkbox v-model="ruleForm.agreed">同意注册协议</el-checkbox>
					</el-form-item>
				</div>
				<div v-if="active == 1">
					<el-form-item label="用户名" prop="prename">
						<el-input v-model="ruleForm.prename" />
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="ruleForm.email" />
						<el-button size="mini" round @click="sendMsg">发送验证码</el-button>
						<span class="status">{{ statusMsg }}</span>
					</el-form-item>
					<el-form-item label="验证码" prop="code">
						<el-input v-model="ruleForm.code" maxlength="4" />
					</el-form-item>
					<el-form-item label="密码" prop="pwd">
						<el-input v-model="ruleForm.pwd" type="password" />
					</el-form-item>
					<el-form-item label="确认密码" prop="cpwd">
						<el-input v-model="ruleForm.cpwd" type="password" />
					</el-form-item>
				</div>
			</el-form>
		</section>
		<div class="footer">
			<el-button v-if="active > 0" type="primary" icon="el-icon-arrow-left" @click="prev"
				>上一步</el-button
			>
			<el-button v-if="active < step - 1" type="primary" icon="el-icon-arrow-right" @click="next"
				>下一步</el-button
			>
			<el-button v-if="active == step - 1" type="primary" @click="register"
				>同意以下协议并注册</el-button
			>
			<div class="error">{{ error }}</div>
		</div>
	</div>
</template>

<script>

export default {
  name: 'register',
  data () {
    // 自定义的密码验证规则
    var validPassword = (rule, value, callback) => {
      const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,20}$/
      if (!reg.test(value)) {
        callback(new Error('密码必须是由4-20位字母+数字组合'))
      } else {
        callback()
      }
    }
    var reCheckPaw = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pwd) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      step: 2,
      active: 0,
      statusMsg: '',
      error: '',
      ruleForm: {
        textarea: '请仔细阅读以下协议...React 和 Vue 有许多相似之处，它们都有：使用 Virtual DOM提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。由于有着众多的相似处，我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性，同时也兼顾了平衡的考量。我们需要承认 React 比 Vue 更好的地方，比如更丰富的生态系统。在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。然而，使用 PureComponent 和 shouldComponentUpdate 时，需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况，那么此类优化就会导致难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着相当的心智负担。在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。你可以理解为每一个组件都已经自动获得了 shouldComponentUpdate，并且没有上述的子树问题限制。Vue 的这个特点使得开发者不再需要考虑此类优化，从而能够更好地专注于应用本身。',
        agreed: false,
        prename: '',
        code: '',
        pwd: '',
        cpwd: '',
        email: ''
      },
      rules: {
        agreed: [{
          validator: (rule, value, callback) => {
            console.log('value:' + value)
            if (value !== true) {
              callback(new Error('请确认同意注册协议'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }],
        prename: [{
          required: true,
          type: 'string',
          message: '请输入用户名',
          trigger: 'blur'
        }, {
          min: 2, max: 9, message: '长度在 2 到 9 个字符', trigger: 'blur'
        }],
        email: [{
          required: true,
          type: 'email',
          message: '请输入邮箱',
          trigger: 'blur'
        }],
        pwd: [{
          required: true,
          message: '创建密码',
          trigger: 'blur'
        },
        { validator: validPassword, trigger: 'blur' }],
        cpwd: [{
          required: true,
          message: '确认密码',
          trigger: 'blur'
        }, {
          validator: reCheckPaw,
          trigger: 'blur'
        }]
      }
    }
  },
  // layout: 'blank',

  methods: {
    sendMsg: function () {
      const self = this
      let namePass
      let emailPass
      if (self.timerid) {
        return false
      }
      this.$refs.ruleForm.validateField('Prename', (valid) => {
        namePass = valid
      })
      self.statusMsg = ''
      if (namePass) {
        return false
      }
      this.$refs.ruleForm.validateField('email', (valid) => {
        emailPass = valid
      })
      // 模拟验证码发送
      if (!namePass && !emailPass) {
        let count = 60
        self.statusMsg = `验证码已发送,剩余${count--}秒`
        self.timerid = setInterval(function () {
          self.statusMsg = `验证码已发送,剩余${count--}秒`
          if (count === 0) {
            clearInterval(self.timerid)
          }
        }, 1000)
      }
    },

    next: function () {
      if (this.active === 0) {
        this.$refs.ruleForm.validateField('agreed', (valid) => {
          if (valid === '') {
            this.active++
          }
        })
      }
    },
    prev: function () {
      this.$refs.ruleForm.clearValidate()
      if (--this.active < 0) this.active = 0
    },

    // 模拟登录
    register: function () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          setTimeout(
            this.$router.push('/login'), 2000
          )
        }
      })
    }
  }
}
</script>

<style>
.header {
	/* //border-bottom: 2px solid rgb(235, 232, 232); */
	min-width: 980px;
	color: #666;
}
header {
	margin: 0 auto;
	padding: 10px 0;
	width: 980px;
}
.login {
	float: right;
}

.bold {
	font-style: normal;
}
.register {
	color: #1890ff;
}

a {
	color: #1890ff;
	text-decoration: none;
	background-color: transparent;
	outline: none;
	cursor: pointer;
	transition: color 0.3s;
}
section {
	margin: 0 auto 30px;
	padding-top: 30px;
	width: 980px;
	min-height: 300px;
	padding-right: 550px;
	box-sizing: border-box;
}
.status {
	font-size: 12px;
	margin-left: 20px;
	color: #e6a23c;
	vertical-align: middle;
}

.error {
	color: red;
}
.footer {
	text-align: center;
}
/* 文本 */
.el-checkbox__input.is-checked + .el-checkbox__label {
	color: #1890ff;
}
.el-checkbox__label {
	color: #999;
}
.el-button--mini,
.el-button--mini.is-round {
	padding: 8px 16px;
	margin-top: 10px;
}
.btncode {
	margin-top: 10px;
}
</style>
